
<template>
  <div
    :id="id"
    style="margin-left: 2px; margin-right: 2px; height: 500px"
  ></div>
</template>

<script>
import * as echarts from "echarts/lib/echarts.js";
export default {
  name: "FunnelChart",
  props: {
    chartData: {
      type: Object,
      default: function () {
        return {};
      },
    },
    id: {
      type: String,
      default: "chart",
    },
  },
  //     query: {
  //       type: Object,
  //       default: function () {
  //         return {}
  //       }
  //     }
  // },

  data() {
    return {
      chart: null,
      // dataList: [],
      funnelDateList: "",
    };
  },
  watch: {
    chartData: {
      //获取需要显示的数据
      handler: function (newVal, oldVal) {
        console.log(JSON.stringify("chartData", newVal));
        this.init();
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.init();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    init() {
      let option = {
        title: {
          // text: "Funnel",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },
        // toolbox: {
        //   feature: {
        //     dataView: { readOnly: false },
        //     restore: {},
        //     saveAsImage: {},
        //   },
        // },
        legend: {
          show: false,
          // data: ["Show", "Click", "Visit", "Inquiry", "Order"],
        },
        series: [
          {
            name: "",
            type: "funnel",
            left: "10%",
            width: "80%",
            label: {
              formatter: "{b}\n{c}%",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              opacity: 0.7,
            },
            emphasis: {
              label: {
                position: "right",
                formatter: "{b}\n {c}%",
              },
            },
            data: this.chartData.list,
            //   [
            //   { value: 60, name: "Visit" },
            //   { value: 40, name: "Inquiry" },
            //   { value: 20, name: "Order" },
            //   { value: 80, name: "Click" },
            //   { value: 100, name: "Show" },
            // ],
          },
          {
            name: "",
            type: "funnel",
            left: "10%",
            width: "80%",
            maxSize: "80%",
            label: {
              position: "inside",
              formatter: "{b}\n{c}%",
              color: "#fff",
            },
            itemStyle: {
              opacity: 0.5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            emphasis: {
              label: {
                position: "inside",
                formatter: "{b}\n {c}%",
              },
            },
            data: this.chartData.row,
            //   [
            //   { value: 30, name: "Visit" },
            //   { value: 10, name: "Inquiry" },
            //   { value: 5, name: "Order" },
            //   { value: 50, name: "Click" },
            //   { value: 80, name: "Show" },
            // ],
            // Ensure outer shape will not be over inner shape when hover.
            z: 100,
          },
        ],
      };

      this.chart = echarts.init(document.getElementById(this.id));

      // Raddar.setOption(option);
      this.chart.setOption(option);
    },
  },
};
</script>
<style lang="sass" scoped>
.jy-container
  width: 100%
  min-height: 450px
</style>